<template>
  <ul class='list'>
    <li v-for="item in getListData">
      <div class="head">
        <p><img class="fl" :src="imgs.logo1" alt=""><span class="title">我的{{item.type | formatType}}反馈</span><span>{{item.date}}</span></p>
        <p class="content">{{item.content}}</p>
      </div>
      <div class="answer">
        <p><span class="title">来自车医生的回复</span><span>{{item.answertime}}</span></p>
        <p class="content">{{item.answercontent}}</p>
      </div>
      <GreyLine></GreyLine>
    </li>
  </ul>
</template>
<script>
import GreyLine from '../../../common/line.vue'
export default {
  props:["data"],
  components: {GreyLine},
  name: "",
  data() {
    return {
      imgs:{
        logo1:require('../../../../assets/img/vip/feedback/1.png')
      }
    };
  },
  filters:{
    formatType(type){
      var array=["保险","续保","保养","其他"]
      return array[type]
    }
  },
  computed:{
    getListData(){
      return this.data||[]
    }
  },
  methods: {},
  created() {}
};
</script>
<style lang="scss" scoped>
.list {
  font-size: 14px;
  color: #666;

  li{

    .head{
      padding: 15px;
      color: #999;
      font-size: 12px;

      p:nth-child(2){
        padding: 10px 15px;
        box-sizing: border-box;
        border-bottom: 1px solid #f2f2f2;
        line-height: 20px;
      }

      img{
        width: 8px;
        height: 8px;
        margin-right: 5px;
        transform: translateY(4px)
      }

      .title{
        margin-right: 40px;
      }
      .content{
        font-size: 14px;
      }
    }
    .answer{
      padding: 0 15px 5px;
      color: #999;
      font-size: 12px;

      p:nth-child(1){
        text-indent: 15px;

        .title{
          margin-right: 15px;
        }
      }
      .content{
        margin: 10px 15px;
        padding: 10px;
        line-height: 20px;
        font-size: 14px;
        background-color: #f2f2f2;
      }
    }
  }
}
</style>